<template>
	<view>
		<u-popup :show="showBottom" mode="bottom"  @close="close" @open="open">
			<view class="poput-box">
				<view class="poput-title">
					<view>
						<u-icon class="poput-title-icon" color="white"  @click="closePopup"  size="20" name="close"></u-icon>
					</view>
					<view class="poput-title-text">
						新建地址
					</view>
					<view>
						<u-icon class="poput-title-icon"  @click="closePopup"  size="20" name="close"></u-icon>
					</view>
				</view>
				<view>
					<view class="poput-list">
						<view class="poput-list-left">
							<view>填写地址</view>
						<!-- 	<view class="weixin-address">
								<view>使用微信地址</view>
							<u-icon
								slot="right"
								name="arrow-right"
								size="10"
							></u-icon>
							</view> -->
						</view>
						<view class="poput-list-right">
							
						</view>
					</view>
					<u--form
						labelPosition="left"
						:model="model1"
						:rules="rules"
						ref="uForm"
						class="form-address"
						
					>	
					<view @click="pickerShow=true" class="address-item">
							<view>所选地区</view>
							<span style="color: red;margin-right: 10rpx;">*</span>
							<u--input
									v-model="model1.userInfo.addresInfo"
									border="none"
									placeholder="省市区街道"
									disabled=true
									disabledColor="#ffffff"
								    @click="pickerShow=true"
							></u--input>
							<!-- <view style="display: flex;"><u-icon name="map" color="#2979ff" size="16"></u-icon><span style="font-size: 18rpx;">定位</span></view> -->
						  <u-picker
						      ref="picker"
						      :show="pickerShow"
						      :columns="columns"
						      keyName="title"
						      @confirm="handleConfirm"
						      @cancel="pickerShow = false"
						      @change="handleChange"
						    ></u-picker>
					</view>
					<view class="address-item">
					<view>详细地址</view>
						<span style="color: red;margin-right: 10rpx;">*</span>
							<u--input
									v-model="model1.userInfo.address"
							
									placeholder='小区楼栋,门牌号等'
									border="none"
							></u--input>
							
						</view>
						<view class="address-item">
						<view>联系人</view>
						<span style="color: red;margin-right: 35rpx;">*</span>
							<u--input
									v-model="model1.userInfo.userName"
									
									placeholder='姓名'
									border="none"
							></u--input>
							<!-- <view class="weixin-address">
								<view>使用微信地址</view>
							<u-icon
								slot="right"
								name="arrow-right"
								size="10"
							></u-icon>
							</view> -->
						</view>
						<view class="address-item">
						<view>联系方式</view>
						<span style="color: red;margin-right: 10rpx;">*</span>
							<u--input
									v-model="model1.userInfo.userMobile"
									maxlength="11"
									placeholder='手机号码'
									border="none"
									type="number"
							></u--input>
						</view>
					</u--form>
					<view class="default-address">
						<view class="default-address-one">
							<view style="font-size: 23rpx;">设为默认地址</view>
							<u-switch class="default" v-model="defaultAddress" size="18" @change="change"></u-switch>
						</view>
					</view>
				</view>
			<!-- 	<view class="intelligence-box">
					<view>智能识别</view>
					<view>
						<u--textarea height="100rpx" v-model="intelligence" placeholder="请输入内容" count="true" 
						
						></u--textarea>
					</view>
				</view> -->
				<view class="submit-box">
					<view class="submit-btn" @click="submit()">保存</view>
				</view>
			</view>
			 <u-toast ref="uToast"></u-toast>
		</u-popup>
	</view>
</template>

<script>
	import {addressList,saveAddress} from "@/api/user.js"
	export default {
		props:['showBottom'],
		data() {
			return {
				intelligence:"",
				defaultAddress:false,
				showSex: false,
				model1: {
					userInfo: {
						addres: '',
						addresInfo: '',
						userName:'',
						userMobile:'',
						provinceId:'',
						cityId:'',
						countyId:'',
						province:'',
						city:'',
						county:'',
						isDefault:0
					},
				},
				actions: [{
					name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				radio: '',
				switchVal: false,
				pickerShow: false,
				  columns: [], // 当前显示的列数据
				  provinceList: [], // 所有省份数据
				  cityList: [], // 当前省份下的城市
				  districtList: [], // 当前城市下的区县
			}
		},
		methods: {
			submit(){
				if(this.model1.userInfo.addresInfo === ''){
					this.$refs.uToast.show({
					  type:"default",message: "请选择地区"
					});
					return
				}
				if(this.model1.userInfo.address === ''){
					this.$refs.uToast.show({
					  type:"default",message: "请填写详细地址"
					});
					return
				}
				if(this.model1.userInfo.userName === ''){
					this.$refs.uToast.show({
					  type:"default",message: "请填写联系人"
					});
					return
				}
				if(this.model1.userInfo.userMobile === ''){
					this.$refs.uToast.show({
					  type:"default",message: "请填写联系方式"
					});
					return
				}
				if(this.model1.userInfo.userMobile.length !== 11){
					this.$refs.uToast.show({
					  type:"default",message: "请填写正确的联系方式"
					});
					return
				}
				uni.showLoading({
					title: '保存中'
				})
				saveAddress({
						...this.model1.userInfo
					}).then((res) => {
						if (res.data.code == '0') {
							console.log(res)
							console.log(res.data.phone);
							uni.setStorageSync('token', res.data.token.token);
							uni.showToast({
								title: '保存成功!',
								icon: 'none',
								duration: 1688,
							})
				
					}
				})
				this.$emit('child-event', false);
			},
			clearForm(){
				this.model1.userInfo={
						addres: '',
						addresInfo: '',
						userName:'',
						userMobile:'',
						provinceId:'',
						cityId:'',
						countyId:'',
						province:'',
						city:'',
						county:'',
						isDefault:0
					}
			},
			change(e) {
				console.log('change', e);
				this.model1.userInfo.isDefault=e?1:0
			},
			closePopup(){
				this.$emit('child-event', false);
			},
			sexSelect(e) 
			{
				this.model1.userInfo.sex = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			},
			// 初始化Picker的列数据
			    initPicker() {
			      // 第一列：省份
			      const provinces = this.provinceList.map(p => ({ ...p, title: p.title }));
			      
			      // 第二列：默认第一个省份的城市
			      const firstProvince = provinces[0]?.children || [];
			      const cities = firstProvince.map(c => ({ ...c, title: c.title }));
			      
			      // 第三列：默认第一个城市的区县
			      const firstCity = cities[0]?.children || [];
			      const districts = firstCity.map(d => ({ ...d, title: d.title }));
			      
			      // 初始化columns结构
			      this.columns = [provinces, cities, districts];
			    },
			
			    // 处理Picker变化事件
			    handleChange({ columnIndex, values,index,value}) {
			      if (columnIndex === 0) { // 省份变化
			        const selectedProvince = values[0];
			        this.cityList = selectedProvince[index].children || [];
			        this.$refs.picker.setColumnValues(1, this.cityList); // 更新第二列
					this.districtList = this.cityList[0].children || [];
			        this.$refs.picker.setColumnValues(2, this.districtList); // 重置第三列
			      } else if (columnIndex === 1) { // 城市变化
			        const selectedCity = values[1];
			        this.districtList = selectedCity[index].children || [];
			        this.$refs.picker.setColumnValues(2, this.districtList); // 更新第三列
			      }
			    },
			
			    // 确认选择
			    handleConfirm({columnIndex, values,index,value}) {			
			      const [province, city, district] = value;
				  this.model1.userInfo.addresInfo=province.title+" "+city?.title+" "+district?.title;
			      console.log('选中的省市区：', province.id,province.title, city?.title, district?.title);
				  this.model1.userInfo.provinceId = province.id;
				  this.model1.userInfo.cityId = city.id;
				  this.model1.userInfo.countyId = district.id;
				  this.model1.userInfo.province = province.title;
				  this.model1.userInfo.city = city.title;
				  this.model1.userInfo.county = district.title;
			      this.pickerShow = false;
			    }
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		 async mounted() {
			 const res = await uni.request({
			  url: "https://mboshop.mbo-world.com:52012/api/city/tree",
			  method: "GET"
			 });
			 console.log(res);
			// 注意：根据实际返回数据结构调整 res.data 的取值层级
			this.provinceList = res[1].data.data || []; 
			console.log(this.provinceList);
		    this.initPicker();
		  }
	}
</script>

<style lang="scss" scoped>
	.address-item{
		
		display: flex;
		align-items: center;
		padding:30rpx;
		border-bottom: 1rpx solid gainsboro;
	}
	.submit-box{
		width:100%;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	.submit-btn{
		text-align: center;
		height:80rpx;
		line-height: 80rpx;
		margin:20rpx;
		background-color: blue;
		color:white;
		border-radius: 50rpx;
	}
	.intelligence-box{
		padding: 20rpx;
		margin-top: 30rpx;
	}
	.default{
		position: absolute;
		right: 40rpx;
	}
	.default-address-one{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		padding: 30rpx 40rpx 10rpx 10rpx;
	}
	.default-address{
		width: 100%;
		margin: 30rpx 30rpx 0rpx 20rpx;
		height: 20rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.form-address{
		padding: 20rpx;
	}
	.weixin-address{
		border-radius: 25rpx;
		border:1rpx solid gainsboro;
		font-size: 15rpx;
		padding: 5rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10rpx;
	}
	.poput-list-left{
		display: flex;
	}
	.poput-list{
		margin: 20rpx 20rpx 0rpx 30rpx;
		height: 20rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.poput-title-icon{
		position: absolute;
		right:25rpx;
		top:25rpx;
	}
	.poput-box{
		border-radius: 15rpx 15rpx 0rpx 0rpx;
		height: 800rpx;
		position: relative;
	}
	.poput-title-text{
		text-align: center;
		font-size: 30rpx;
	}
	.poput-title{
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
	}
</style>
